<template>
  <div class="cartContainer">
    <h2>购物车</h2>
    <ul class="mui-table-view">
      <router-link tag="li"
      :to="'/home/goodsinfo/'+item.id"
        v-for="item in cart"
        :key="item.index"
        class="mui-table-view-cell mui-media"
      >
        <img class="mui-media-object mui-pull-left" :src="item.img_url" />
        <div class="mui-media-body">
            <p class="goods-info">
                <span class="title">{{item.tille}}</span>
                <span class="price">￥{{item.price}}</span>
            </p>
            <p class="goods-control">
                 <numberbox :initCount ="item.count" :min="1" :max="item.stock" :goodsId ="item.id" :isChangeStore="true"></numberbox>
                 <span class="remove" @click.stop="remove(item.id)">x</span>
            </p>
        </div>
      </router-link>
      <li class="mui-table-view-cell mui-media total-price">总金额：￥{{this.$store.getters.getTotalPrice}}<span class="price"></span></li>
    </ul>
    <div class="btn"><button type="button" class="mui-btn mui-btn-danger mui-btn-block">结算</button></div>
   
  </div>
</template>
<script>
import numberbox from '../subComponemts/numberbox.vue'
export default {
    data(){
        return{
         cart:[],
        }
    },
    methods:{
          getCart(){
              this.cart = JSON.parse(localStorage.getItem('cart') || '[]');
              //this.cart = this.$store.state.cart
          },
          remove(goodsId){
            this.$store.commit('removeGoods',goodsId);
            this.getCart()
          }
    },
    components:{
     numberbox
    },
    created(){
        this.getCart()
    }
};
</script>
<style lang="less">
.cartContainer{
    h2{
     font-size: 18px;
     font-weight: bold;
     text-align: center;
     color: #444;
     padding: 8px;
     background-color: #fff;
    }
    .mui-table-view{
        margin: 0;
      .mui-table-view-cell{
          width: 100%;
          .mui-media-object{
           max-width: 100px;
           height: 80px;
          }
          .mui-media-body{
            .goods-info{
                font-size: 16px;
                color: #444;
                line-height: 20px;
                display: flex;
                justify-content: space-between;
                margin-bottom: 20px;
                .price{
                    color:#222;
                    font-weight: bold;
                }
            }
            .goods-control{
                display: flex;
                justify-content: space-between;
                .remove{
                    font-size:18px;
                    padding: 10px;
                }
            }
          }
      }
      li.total-price{
          font-size: #333;
          color:#333;
          font-weight: bold;
          text-align: center;
          background-color: #fff;
          padding: 10px;
         .price{
             color: rgb(231, 58, 58);
         }
      }
    }
    .mui-btn{
        position: absolute;
        bottom: 50px;
    }
}
</style>